import React, { useState, useContext } from 'react';
import {
  Tooltip,
  Input,
  Avatar,
  Select,
  Dropdown,
  Menu,
  Divider,
  Message,
  Button,
} from '@arco-design/web-react';
import {
  IconLanguage,
  IconNotification,
  IconSunFill,
  IconMoonFill,
  IconUser,
  IconSettings,
  IconPoweroff,
  IconExperiment,
  IconDashboard,
  IconInteraction,
  IconTag,
  IconLoading,
} from '@arco-design/web-react/icon';
import './index.less';
import { GlobalContext } from '../../context';
import { useNavigate } from 'react-router-dom';
import Logo from '/vite.svg';
import IconButton from './IconButton';
// 退出登陆

function Header() {
  const { setLang, lang, theme } = useContext(GlobalContext);
  const [them, setTheme] = useState('dark');

  const [userInfo, setUserInfo] = useState('admin');

  const goPage = useNavigate();

  function logout() {
    goPage('/login', { replace: true });
  }

  return (
    <div className='navbar'>
      <div className='left'>
        <div className='logo'>
          <img src={Logo} />
          <div className=''>Arco-Admin-Pro</div>
        </div>
      </div>
      <ul className='right'>
        <li>
          <Input.Search className='round' placeholder='请输入搜索内容' />
        </li>
        <li>
          <Select
            options={[
              { label: '中文', value: 'zh-CN' },
              { label: 'English', value: 'en-US' },
            ]}
            triggerProps={{
              autoAlignPopupWidth: false,
              autoAlignPopupMinWidth: true,
              position: 'br',
            }}
            trigger='hover'
            onChange={(value) => {
              Message.info(`${['message.lang.tips']}${value}`);
            }}
          />
        </li>
        <li>
          <Tooltip
            content={
              theme === 'light' ? '点击i切换为白天模式' : '点击切换为黑夜模式'
            }
          >
            <IconButton
              icon={theme !== 'dark' ? <IconMoonFill /> : <IconSunFill />}
              onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
            />
          </Tooltip>
        </li>
        {userInfo && (
          <li>
            <Dropdown position='br'></Dropdown>
            <Dropdown
              position='br'
              droplist={
                <Menu>
                  <Menu.Item key='1' onClick={logout}>
                    退出登陆
                  </Menu.Item>
                  <Menu.Item key='2'>个人中心</Menu.Item>
                </Menu>
              }
            >
              <Avatar size={32} style={{ cursor: 'pointer' }} shape='square'>
                admin
              </Avatar>
            </Dropdown>
          </li>
        )}
      </ul>
    </div>
  );
}

export default Header;
